<!DOCTYPE html>
<html>
    <head>
        <body>
            <script>document.addEventListener( "DOMContentLoaded", () => {

                function registerCustomElement( elName, templateId ) {
                  globalThis.customElements.define( elName, class extends HTMLElement {
                  constructor() {
                      super();
                      this.attachShadow({ mode: "open" });
                      this.shadowRoot.appendChild( document.getElementById( templateId ).content );
                    }
                  });
                }
            
                registerCustomElement( "foo-component", "fooTemplate" );
                registerCustomElement( "input-component", "inputTemplate" );
                registerCustomElement( "click-component", "clickTemplate" );
                registerCustomElement( "select-component", "selectTemplate" );
            });

            function myFunction() {
                var x = document.getElementById("hiddenEL");
                if (x.style.display === "none") {
                    x.style.display = "block";
                } else {
                    x.style.display = "none";
                }
            }
            </script>

            <foo-component id="fooShadowRoot"></foo-component>
            <template id="fooTemplate">
                <div id="shadowLocalTarget">
                    <div>Local Target in Shadow DOM</div><br><br>
                    <div>In both DOM</div>
                    <div>Double quote: 50"</div>
                    <div>Single quote: O'Malley's</div>
                    <div>My cat's name is "Bob"</div>
                </div>
                <custom title="Test123">*</custom> 
            </template>
            <input-component id="inputShadowRoot"></input-component>
            <template id="inputTemplate">
                <div id="shadowInputTarget">
                    <input type="text" placeholder="What's your name" contenteditable="true"></input>
                </div><br><br>
                <div id="secondinput">
                    <label id="second" for="withlabel">Input2</label>
                    <input type="text" id="withlabel" aria-labelledby="second"></input>
                </div>
                <div>
                    <textarea id="textarea123">Textarea</textarea>
                </div>
                <div>
                    <textarea id="textarea456">Textarea2</textarea>
                </div>

                </div>  
            </template>
            <click-component id="buttonShadowRoot"></click-component>
            <template id="clickTemplate">
                <div id="shadowClickTarget">
                    <button id="myButton" tooltip="Click this" aria-label="Another label" onclick="myFunction()">Click me</button>
                    <a href="./alert.html">Link</a>

                </div>  
            </template>
            <select-component id="selectShadowRoot"></select-component>
            <template id="selectTemplate">
                <br><br>
                <div id="shadowSelectTarget">
                    <label>Dropdown label</label>
                    <select id="select1">
                        <option value="First">First</option>
                        <option value="Second">Second</option>
                        <option value="Third">Third</option>
                    </select>
                </div>
                <br><br>
            </template>

            <input type="text" placeholder="username"/>
            <span>In both DOM</span>
            <div style="display:none" id="hiddenEL">This should be hidden</div>
            <div>
                <span>Level 1</span>
                <div>
                    <span>Level 2</span>
                    <button id="normalbutton">Normal Button</button>
                </div>
                <ul id="myUL">
                    <li><span class="caret">Beverages</span>
                      <ul class="nested">
                        <li>Water</li>
                        <li>Coffee</li>
                        <li><span class="caret">Tea</span>
                          <ul class="nested">
                            <li>Black Tea</li>
                            <li>White Tea</li>
                            <li>Water</li>
                            <li>Coffee</li>
                            <li><span class="caret">Green Tea</span>
                              <ul class="nested">
                                <li>Sencha</li>
                                <li>Gyokuro</li>
                                <li>Matcha</li>
                                <li>Pi Lo Chun</li>
                              </ul>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
            </div>
        </body>
    </head>


</html>

